<template>
  <div class="page-panel">
    <baidu-map
      class="map"
      :center="{lng: 116.404, lat: 39.915}"
      :zoom="14"
      :scroll-wheel-zoom="true"
    >
      <bml-heatmap :data="data" :max="100" :radius="20"></bml-heatmap>
    </baidu-map>
  </div>
</template>

<script>
import { BmlHeatmap } from "vue-baidu-map";
export default {
  name: "bd-map",
  data() {
    return {
      data: [
        { lng: 116.418261, lat: 39.921984, count: 500 },
        { lng: 116.423332, lat: 39.916532, count: 51 },
        { lng: 116.419787, lat: 39.930658, count: 15 },
        { lng: 116.429747, lat: 39.930628, count: 115 },
        { lng: 116.419757, lat: 39.920638, count: 215 },
        { lng: 116.419767, lat: 39.930648, count: 315 }
        // ...此处添加更多的数据集
      ]
    };
  },
  methods: {
    updatePolylinePath(e) {
      this.polylinePath = e.target.getPath();
    },
    addPolylinePoint() {
      this.polylinePath.push({ lng: 116.404, lat: 39.915 });
    }
  },
  components: {
    BmlHeatmap
  }
};
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 800px;
}
</style>
